<template>
	<view class="content">
		<!-- {{imagesBaseUrl}}123 -->
		<!-- `/images/company/louImges.jpg` -->
		<u-image :showLoading="true" :src="sourceData.cover_image?imgUrl(sourceData.cover_image):imgUrl(`/images/company/louImges.jpg`)" width="330rpx" mode="widthFix" ></u-image>
		<view class="content-right" ref="contentRight">
			<view class="content-right-title"> <text>{{sourceData.spaceNum}}㎡ · {{sourceData.title}}
			<!-- {{sourceData.zhandi}}㎡ -->
			</text> </view>
			<view class="content-right-price font"> <text>{{sourceData.meters_money}}元/㎡ </text></view>
			<view class="surface font" > 
			<text v-show="sourceData.type == 'housing' ">写字楼</text> 
			<text v-show="sourceData.type == 'store' ">店铺</text>
			<text v-show="sourceData.type == 'building' ">大厦</text>
			</view>
			<view class="surface font" style="margin-top: 20rpx;">  
			      <text>{{sourceData.street_name}}-{{sourceData.community_name}}</text> 
			</view>
			<view class="tag" >
				<view class="tag-list">
					<!-- <text class="sales-tag font" v-for="(item,index) in sourceData.tagList" :key="index"> -->
						<!-- {{item}} -->
					<!-- </text> -->
                   <view class="sales-tag font" v-for="(item,index) in sourceData.tagList" :key="index">
                     	<u-tag :text="item" :type="tagType[tagNum(index)]" size="mini" border-color="#FFFFFF"/>
                   </view>
				</view>
			</view>

		</view>




	</view>
	</view>
</template>

<script>
	export default {
		props: {
			sourceDataProp: Object,
			
		},
		
		data() {
			return {
				// sourceData: {
				// 	images: `/images/company/louImges.jpg`,
				// 	title: `工贸新天地2期-新都会工贸新天地2期-新都会`,
				// 	price: `0.50`,
				// 	surface_start: 100,
				// 	surface_end: 200,
				// 	tagList:'预约折扣,急售,预约折扣,预约折扣,预约折扣,急售,预约折扣,急售1',
				// },
				showEllipsis: false,
				sourceData:{},
				
				tagType:[ 'success' ,'primary'   ,'warning'  ,'error' ]
				// contentRightWidth:0
			}
		},
		created() {
			
			this.sourceData = this.sourceDataProp
			
			// console.log(this.sourceDataProp)
			// console.log(this.sourceData.tagList)
			this.sourceData.tagList = this.sourceData.tagList?this.sourceData.tagList.split(','):[]
		},
		  mounted() {
			this.$nextTick(()=>{
			let tag = uni.createSelectorQuery().in(this).select(".tag");
			let tagList = uni.createSelectorQuery().in(this).select(".tag-list");
		    	tag.fields({
				size: true
			}, data => {
				 let tagHeight = tagHeight=data.height
				 tagList.fields({
				 	size: true
				 }, data => {
				 let	tagListHeight = data.height
				 if(tagListHeight > tagHeight){
				 	this.showEllipsis = true
				 }
				 }).exec();
				}).exec();
			})
			// console.log(document.gett)
			// console.log(document.getElementsByClassName('content-right'))
		},
		computed: {
			
		},
		methods: {
           tagNum(index){
           	// index <=  tagType.length-1 ? tagType[index]:  tagType[(index + 1) % tagType.length - 1]
              const {tagType} = this
			   if(index+1  <=  tagType.length){
           		// console.log(index)
           		return index
           	}else{
           	  let remainder =	(index + 1) % tagType.length    
           	  return  remainder == 0 ? tagType.length-1:remainder-1
           	}
           
           }
		}
	}
</script>

<style scoped lang="less">
	.content {
		padding: 20rpx;
		display: flex;

		.content-right {
			flex: 1;
			// border: 1rpx solid red;
			// border: 1rpx solid red;
			overflow-x: hidden;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;

			// border: 1rpx solid red;
			.content-right-title {
				font-size: 30rpx;
				white-space: nowrap;
				overflow-x: hidden;
				text-overflow: ellipsis;
				color: #4e4f50;
				// margin-top: 5rpx;
			}

			.content-right-price {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin-top: 15rpx;

				text {
					margin-right: 10rpx;
					color: #ff6b57;
				}
			}

			.surface {
				color: #a6a6a7;
				margin-top: 5rpx;
				white-space: nowrap;
				overflow-x: hidden;
				text-overflow: ellipsis;
			}

			.tag {
                height: 62rpx;
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				// border: 1rpx solid red;
				overflow: hidden;
				.tag-list {
					white-space: nowrap;
					flex-wrap: wrap;
					display: flex;
					align-items: center;
					overflow-y: hidden;
					.sales-tag {
						// border: 1rpx solid #a6a6a7;
						margin-top: 15rpx;
						// border-radius: 8rpx;
						// color: #a6a6a7;
						// padding: 3rpx 5rpx 3rpx 5rpx;
					}

					.sales-tag:nth-child(n+2) {
						margin-left: 8rpx;
					}


				}
              .show-ellipsis{
				  color:#a6a6a7;
			  }
			}


		}

		.font {
			font-size: 25rpx;
		}

	}
</style>
